<template>
  <Teleport to="body">
    <Transition name="message" appear>
      <div v-if="visible" :class="messageClass" class="message-container">
        <div class="message-content">
          <svg v-if="type === 'success'" class="message-icon" viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z"/>
          </svg>
          <svg v-else-if="type === 'error'" class="message-icon" viewBox="0 0 24 24">
            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,7A1,1 0 0,0 11,8V12A1,1 0 0,0 12,13A1,1 0 0,0 13,12V8A1,1 0 0,0 12,7M12,17.5A1.5,1.5 0 0,1 10.5,16A1.5,1.5 0 0,1 12,14.5A1.5,1.5 0 0,1 13.5,16A1.5,1.5 0 0,1 12,17.5Z"/>
          </svg>
          <svg v-else class="message-icon" viewBox="0 0 24 24">
            <path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
          </svg>
          <span class="message-text">{{ text }}</span>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  type: {
    type: String,
    default: 'info',
    validator: (value) => ['success', 'error', 'info', 'warning'].includes(value)
  },
  text: {
    type: String,
    required: true
  },
  duration: {
    type: Number,
    default: 3000
  }
})

const emit = defineEmits(['close'])

const visible = ref(false)

const messageClass = {
  'message-success': props.type === 'success',
  'message-error': props.type === 'error',
  'message-info': props.type === 'info',
  'message-warning': props.type === 'warning'
}

onMounted(() => {
  visible.value = true
  
  if (props.duration > 0) {
    setTimeout(() => {
      visible.value = false
      setTimeout(() => {
        emit('close')
      }, 300)
    }, props.duration)
  }
})
</script>

<style scoped>
.message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}

.message-content {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(20px);
  font-size: 0.9rem;
  font-weight: 500;
  pointer-events: auto;
  max-width: 400px;
  min-width: 200px;
}

.message-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.message-text {
  word-break: break-word;
}

.message-success .message-content {
  background: rgba(34, 139, 34, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-success .message-icon {
  fill: white;
}

.message-error .message-content {
  background: rgba(239, 68, 68, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-error .message-icon {
  fill: white;
}

.message-info .message-content {
  background: rgba(88, 86, 214, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-info .message-icon {
  fill: white;
}

.message-warning .message-content {
  background: rgba(245, 158, 11, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.message-warning .message-icon {
  fill: white;
}

/* 过渡动画 */
.message-enter-active,
.message-leave-active {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.message-enter-from {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
}

.message-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px) scale(0.95);
}

.message-enter-to,
.message-leave-from {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
</style> 